<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: liulu
  Date: 2019/07/21
  Time: 19:30
  用户维护模块，分配角色功能页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/main.css">
    <link rel="stylesheet" href="${APP_PATH}/css/doc.min.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="user.html">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <%--头部导航栏--%>
            <jsp:include page="/WEB-INF/jsp/common/headShow.jsp"></jsp:include>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <%--左方功能树导航栏,静态包含--%>
                <%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label>未分配角色列表</label><br>
                            <select id="leftRoleList" class="form-control" multiple size="10"
                                    style="width:200px;overflow-y:auto;">
                                <c:forEach items="${listLeftRole}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="leftToRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="rightToLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label>已分配角色列表</label><br>
                            <select id="rightRoleList" class="form-control" multiple size="10"
                                    style="width:200px;overflow-y:auto;">
                                <c:forEach items="${listRightRole}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">帮助</h4>
            </div>
            <div class="modal-body">
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题1</h4>
                    <p>测试内容1，测试内容1，测试内容1，测试内容1，测试内容1，测试内容1</p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题2</h4>
                    <p>测试内容2，测试内容2，测试内容2，测试内容2，测试内容2，测试内容2</p>
                </div>
            </div>
            <!--
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            -->
        </div>
    </div>
</div>
<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/jquery/layer/layer.js"></script>
<script type="text/javascript">

    $("#leftRoleList").click(function () {
        $("#leftToRightBtn").removeClass("disabled");
        $("#rightToLeftBtn").addClass("disabled");
        //解绑角色移除函数
        $("#rightToLeftBtn").unbind("click");
        //绑定角色分配函数
        $("#leftToRightBtn").unbind("click").click(function () {
            AssignRole();
        });
    });


    $("#rightRoleList").click(function () {
        $("#rightToLeftBtn").removeClass("disabled");
        $("#leftToRightBtn").addClass("disabled");
        //解绑角色移除函数
        $("#leftToRightBtn").unbind("click");
        //绑定角色分配函数
        $("#rightToLeftBtn").unbind("click").click(function () {
            UnAssignRole();
        });
    });


    //角色分配函数
    function AssignRole() {
        var selectedOptions = $("#leftRoleList option:selected");
        var jsonObj = {
            userId : "${param.userId}"//获取参数id
        };
        $.each(selectedOptions, function (index, item) {
            jsonObj["ids["+index+"]"] = item.value;
        });

        var index = -1;
        $.ajax({
            type : "POST",
            data : jsonObj,
            url : "${APP_PATH}/user/doAssignRole.do",
            beforeSend : function () {
                index = layer.load(1, {time: 5*1000});
                return true;
            },
            success : function (reslut) {
                if(reslut.code==100){
                    layer.close(index);
                    $("#rightRoleList").append(selectedOptions.clone());
                    selectedOptions.remove();
                }else {
                    layer.close(index);
                    layer.msg("角色分配失败");
                }
            },
            error:function () {
                layer.msg("未知错误");
            }
        });
    }
    //角色移除函数
    function UnAssignRole() {
        var selectedOptions = $("#rightRoleList option:selected");

        var jsonObj = {
            userId : "${param.userId}"//获取参数id
        };

        $.each(selectedOptions, function (index, item) {
            jsonObj["ids["+index+"]"]=item.value;
        });

        var index = -1;
        $.ajax({
            type : "POST",
            data : jsonObj,
            url : "${APP_PATH}/user/doNnAssignRole.do",
            beforeSend : function () {
                index = layer.load(1, {time: 5*1000});
                return true;
            },
            success : function (reslut) {
                if(reslut.code==100){
                    layer.close(index);
                    $("#leftRoleList").append(selectedOptions.clone());
                    selectedOptions.remove();
                }else {
                    layer.close(index);
                    layer.msg("角色分配失败");
                }
            },
            error:function () {
                layer.msg("未知错误");
            }
        });
    }



    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
</script>
</body>
</html>

